<section class="wsl-page-tab" id="wsl-batch-tab-elements">
  <div class="wsl-box space-y-4 p-4">
    <app-home-list-filter
      [manager]="filterManager"
      [params]="filterParams()"
      [stats]="filterStats()"
      (updateList)="updateList($event)" />
    <div *ngIf="countShownRows('common')">
      <div class="wsl-list-head">
        <h3>Common Testcases</h3>
        <p>
          Testcases that are both in version
          {{ params.srcBatchName }}
          {{ suite.latest.batchSlug === params.srcBatchSlug ? '(latest)' : '' }}
          and in version {{ params.dstBatchName }}
          {{
            suite.baseline.batchSlug === params.dstBatchSlug ? '(baseline)' : ''
          }}
        </p>
        <p *ngIf="countShownRows('common') !== countRows('common')">
          You are viewing
          <b>
            {{
              countShownRows('common')
                | i18nPlural : { '=1': 'one', other: '#' }
            }}
          </b>
          of {{ countRows('common') }} common cases.
        </p>
      </div>
      <ul class="wsl-list-body">
        <li
          class="wsl-list-item-outer"
          *ngFor="let item of getShownRows('common'); let i = index"
          (click)="selectedRow = i"
          [ngClass]="
            selectedRow === i
              ? 'border-l-sky-200 dark:border-l-sky-700'
              : 'border-l-transparent'
          ">
          <app-batch-item-element
            [item]="item"
            [params]="params"
            [chosenTopics]="chosenTopic"
            (updateChosenTopics)="updateChosenTopics($event)" />
        </li>
      </ul>
    </div>
    <div *ngIf="countShownRows('fresh')">
      <div class="wsl-list-head">
        <h3>New Testcases</h3>
        <p>
          Testcases that are submitted in version
          {{ params.srcBatchName }}
          {{ suite.latest.batchSlug === params.srcBatchSlug ? '(latest)' : '' }}
          but were not included in version {{ params.dstBatchName }}
          {{
            suite.baseline.batchSlug === params.dstBatchSlug ? '(baseline)' : ''
          }}
        </p>
        <p *ngIf="countShownRows('fresh') !== countRows('fresh')">
          You are viewing
          <b>
            {{
              countShownRows('fresh') | i18nPlural : { '=1': 'one', other: '#' }
            }}
          </b>
          of {{ countRows('fresh') }} new cases.
        </p>
      </div>
      <ul class="wsl-list-body">
        <li
          class="wsl-list-item-outer"
          *ngFor="let item of getShownRows('fresh'); let i = index"
          (click)="selectedRow = i + countShownRows('common')"
          [ngClass]="
            selectedRow === i + countShownRows('common')
              ? 'border-l-sky-200 dark:border-l-sky-700'
              : 'border-l-transparent'
          ">
          <app-batch-item-element
            [item]="item"
            [params]="params"
            [chosenTopics]="chosenTopic"
            (updateChosenTopics)="updateChosenTopics($event)" />
        </li>
      </ul>
    </div>
    <div *ngIf="countShownRows('missing')">
      <div class="wsl-list-head">
        <h3>Missing Testcases</h3>
        <p>
          Testcases that were included in version
          {{ params.dstBatchName }}
          {{
            suite.baseline.batchSlug === params.dstBatchSlug ? '(baseline)' : ''
          }}
          but are not submitted in version {{ params.srcBatchName }}
          {{ suite.latest.batchSlug === params.srcBatchSlug ? '(latest)' : '' }}
        </p>
        <p *ngIf="countShownRows('missing') !== countRows('missing')">
          You are viewing
          <b>
            {{
              countShownRows('missing')
                | i18nPlural : { '=1': 'one', other: '#' }
            }}
          </b>
          of {{ countRows('missing') }} missing cases.
        </p>
      </div>
      <ul class="wsl-list-body">
        <li
          class="wsl-list-item-outer"
          *ngFor="let item of getShownRows('missing'); let i = index"
          (click)="
            selectedRow = i + countShownRows('common') + countShownRows('fresh')
          "
          [ngClass]="
            selectedRow ===
            i + countShownRows('common') + countShownRows('fresh')
              ? 'border-l-sky-200 dark:border-l-sky-700'
              : 'border-l-transparent'
          ">
          <app-batch-item-element
            [item]="item"
            [params]="params"
            [chosenTopics]="chosenTopic"
            (updateChosenTopics)="updateChosenTopics($event)" />
        </li>
      </ul>
    </div>
    <app-home-list-pager
      [params]="pagerParams()"
      [stats]="filterStats()"
      (updateList)="updateList($event)" />
  </div>
</section>
